<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光与影</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="css/templatemo-style.css" charset="utf-8">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/getParameter.js"></script>
</head>
<body>
<script>

</script>
<!--头部-->
<div id="header"></div>
<!--搜索-->

<div class="container-fluid tm-container-content tm-mt-60">
    <div class="row mb-4">
        <h2 class="col-6 tm-text-primary" id="searchByinameSpilt">
            Related Photos
        </h2>
        <div class="col-6 d-flex justify-content-end align-items-center">
            <form action="" class="tm-text-primary">
                Page <SPAN value="1" size="1" id="totalCountSpan"></SPAN> of <span id="totalPageSpan"></span>
            </form>
        </div>
    </div>
    <div class="row tm-mb-90 tm-gallery" id="img_loader">
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-03.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Clocks</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">18 Oct 2020</span>-->
        <!--                <span>9,906 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-04.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Plants</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">14 Oct 2020</span>-->
        <!--                <span>16,100 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-05.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Morning</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">12 Oct 2020</span>-->
        <!--                <span>12,460 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-06.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Pinky</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">10 Oct 2020</span>-->
        <!--                <span>11,402 views</span>-->
        <!--            </div>-->
        <!--        </div>-->

        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-01.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Hangers</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">24 Sep 2020</span>-->
        <!--                <span>16,008 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-02.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Perfumes</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">20 Sep 2020</span>-->
        <!--                <span>12,860 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-07.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Bus</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">16 Sep 2020</span>-->
        <!--                <span>10,900 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-08.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>New York</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">12 Sep 2020</span>-->
        <!--                <span>11,300 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-09.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Abstract</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">10 Sep 2020</span>-->
        <!--                <span>42,700 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-10.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Flowers</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">8 Sep 2020</span>-->
        <!--                <span>11,402 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-11.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Rosy</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">4 Sep 2020</span>-->
        <!--                <span>32,906 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-12.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Rocki</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">28 Aug 2020</span>-->
        <!--                <span>50,700 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-13.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Purple</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">22 Aug 2020</span>-->
        <!--                <span>107,510 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-14.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Sea</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">14 Aug 2020</span>-->
        <!--                <span>118,006 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-15.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Turtle</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">9 Aug 2020</span>-->
        <!--                <span>121,300 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
        <!--        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">-->
        <!--            <figure class="effect-ming tm-video-item">-->
        <!--                <img src="img/img-16.jpg" alt="Image" class="img-fluid">-->
        <!--                <figcaption class="d-flex align-items-center justify-content-center">-->
        <!--                    <h2>Peace</h2>-->
        <!--                    <a href="photo-detail.html">View more</a>-->
        <!--                </figcaption>-->
        <!--            </figure>-->
        <!--            <div class="d-flex justify-content-between tm-text-gray">-->
        <!--                <span class="tm-text-gray-light">3 Aug 2020</span>-->
        <!--                <span>21,204 views</span>-->
        <!--            </div>-->
        <!--        </div>-->
    </div>
    <!-- row -->

</div>
<!--尾部-->
<footer id="footer"></footer>

<script src="js/plugins.js"></script>
<script>
    $(window).on("load", function () {
        var iname = getParameter("iname");
        var currentPage = getParameter("currentPage");
        $('body').addClass('loaded');
        $.get("header.html", function (data) {
            $("#header").html(data);
        });
        $.get("footer.html", function (data) {
            $("#footer").html(data);
        });
        $.post("/photograph/search/findImg", {iname: iname, currentPage: currentPage},
            function (data) {
                // 1.更新数据  共x页y条
                $("#totalCountSpan").html(data.currentPage);
                $("#totalPageSpan").html(data.totalPage);
                // 2.拼接数据
                $div = $("#img_loader");
                var divList = '';
                for (var i = 0; i < data.list.length; i++) {
                    var div = '<div class="col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12 mb-5">\n' +
                        '            <figure class="effect-ming tm-video-item">\n' +
                        '                <img src="' + data.list[i].isrc + '" alt="Image" class="img-fluid">\n' +
                        '                <figcaption class="d-flex align-items-center justify-content-center">\n' +
                        '                    <h2>' + data.list[i].iname + '</h2>\n' +
                        '                    <a onclick="reading(' + data.list[i].iid + ')" href="photo-detail.html?iid=' + data.list[i].iid + '">View more</a>\n' +
                        '                </figcaption>\n' +
                        '            </figure>\n' +
                        '            <div class="d-flex justify-content-between tm-text-gray">\n' +
                        '                <span class="tm-text-gray-light">' + data.list[i].idate + '</span>\n' +
                        '                <span>' + data.list[i].iclick + ' views</span>\n' +
                        '            </div>\n' +
                        '        </div>';
                    divList += div;
                }
                $div.html(divList);

            }, "json");

    });





    function reading(iid) {
        $.post("/photograph/read/reading", {iid: iid}, function (data) {

        }, "json")
    }
</script>
</body>
</html>